﻿<%@ Page Title="" Language="C#" MasterPageFile="~/_Default.Master" AutoEventWireup="true" CodeBehind="Arts.aspx.cs" Inherits="WebApplication.Arts" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <%--标签--%>
    <div class="search-card">
    </div>

    <%--内容--%>
    <div class="layui-row layui-col-space10 mt-20 mb-10">

        <% if (artworks.Count != 0)
                { %>
            <% foreach (Models.Artworks item in artworks)
                {%>
            <div class="layui-col-md2">
                <div class="art-item">
                    <div class="cover-wrapper"
                        url="Art/Detail.aspx?id=<%=item.ArtworkID %>"
                        style="background-image: url(<%=item.Cover.Substring(1, item.Cover.Length - 1) %>);">
                        <div class="type">
                            <a href="/Resume.aspx?id=<%=item.OwnerID %>" target="_blank"><span class="color-money">¥ 找TA约稿 ¥</span></a>
                        </div>
                    </div>
                    <div class="flex-container user-wrapper">
                        <a style="font-size: 0px;" href="User/Arts.aspx?id=<%=item.OwnerID %>" target="_blank">
                            <span class="avatar" style="width: 24px; height: 24px;">
                                <img src="<%=item.Owner.AvatarUrl.Substring(1, item.Owner.AvatarUrl.Length - 1) %>" />
                            </span>
                        </a>
                        <a class="nickname flex-grow-1" href="User/Arts.aspx?id=<%=item.OwnerID %>" target="_blank"><%=item.Owner.NickName %></a>
                        <div class="like flex-shrink-0 <%=item.IsLike?"liked":"" %>" id="<%=item.ArtworkID %>">
                            <i class="iconfont icon-zan"></i>
                            <span class="count"><%=item.LikeCount %></span>
                        </div>
                    </div>
                </div>
            </div>
            <%} %>
            <script>
                $('.art-item .cover-wrapper').on('click', e => {
                    if ($(e.target).attr("url")) {
                        location.href = $(e.target).attr("url");
                    }
                })
                $('.like').on('click', e => {
                    let node = e.delegateTarget;
                    $.ajax({
                        url: 'Art/Handle.aspx',
                        method: "post",
                        data: {
                            action: "Like",
                            id: $(node).attr("id")
                        },
                        success: (msg) => {
                            location.reload();
                        }
                    })
                })
            </script>
            <%}
                else
                {%>
            <div class="empty"></div>
            <%} %>

    </div>

    <%--分页--%>
    <div class="text-center" id="laypage"></div>


    <script>
        const data = [
            {
                name: '类型',
                value: 'type',
                children: [
                    {
                        name: '全部',
                        value: ''
                    },
                ].concat(tagOptions.types.map(item => { return { name: item, value: item } }))
            },
            {
                name: '风格',
                value: 'style',
                children: [
                    {
                        name: '全部',
                        value: ''
                    }
                ].concat(tagOptions.styles.map(item => { return { name: item, value: item } }))
            }, {
                name: '排序',
                value: 'order',
                children: [
                    {
                        name: '最新',
                        value: ''
                    },
                    {
                        name: '最赞',
                        value: 'LastLikedAt'
                    }
                ]
            }
        ]


        utils.searchTags({
            data,
            elem: '.search-card',
            click: (opt) => {
                let url = new URL(location.href);
                url.searchParams.set(opt.name, opt.value);
                location.href = url;
            }
        })

        layui.use('laypage', function () {
            var laypage = layui.laypage;

            //执行一个laypage实例
            laypage.render({
                elem: 'laypage' //注意，这里的 test1 是 ID，不用加 # 号
                , count: <%=totalCount%> //数据总数，从服务端得到
              , curr:<%=pageIndex%>
              , limit:<%=pageSize%>
              , jump: function (obj, first) {
                    //obj包含了当前分页的所有参数，比如：
                    //console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                    //console.log(obj.limit); //得到每页显示的条数

                    //首次不执行
                  if (!first) {
                      let url = new URL(location.href);
                      url.searchParams.set("pageIndex", obj.curr)
                      location.href = url;
                    }
               }
            });
        });
    </script>
</asp:Content>
